<template>
  <div class="pie-chart-container">
    <div ref="pieChart" style="width: 100%; height: 300px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'LeavePieChart',
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.pieChart)

      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          data: ['年假', '病假', '事假', '调休', '婚假', '产假']
        },
        series: [
          {
            name: '请假类型',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              formatter: '{b}: {d}%'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true
            },
            data: [
              { value: 35, name: '年假', itemStyle: { color: '#5470C6' } },
              { value: 38, name: '病假', itemStyle: { color: '#EE6666' } },
              { value: 12, name: '事假', itemStyle: { color: '#FAC858' } },
              { value: 8, name: '调休', itemStyle: { color: '#91CC75' } },
              { value: 5, name: '婚假', itemStyle: { color: '#73C0DE' } },
              { value: 2, name: '产假', itemStyle: { color: '#3BA272' } }
            ]
          }
        ]
      }

      chart.setOption(option)

      window.addEventListener('resize', function() {
        chart.resize()
      })
    }
  }
}
</script>

<style scoped>
.pie-chart-container {
  width: 100%;
}
</style>